<template>
  <div>
    <div class="header">
      <van-nav-bar @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="20" color="black" />
          返回
        </template>
        <template #title> 详细信息 </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        @select="onSelect"
      />
    </div>
  </div>
</template>

<script>
import { addressList } from "../../api/massage";
import Vue from "vue";
import { AddressList } from "vant";
Vue.use(AddressList);
export default {
  data() {
    return {
      chosenAddressId: null,
      list: [],
      address: {},
      resdata: null,
    };
  },
  created() {
    addressList({ userid: localStorage.getItem("userid") }).then((data) => {
      console.log(data.data.data);
      // console.log(this.list);
      this.resdata = data.data.data;
      // this.chosenAddressId = this.resdata[this.resdata.length - 1].addressid;
      this.resdata.forEach((item, index) => {
        this.address = {
          id: item.addressid,
          name: item.name,
          tel: item.tel,
          address: item.province + "" + item.city + "" + item.county,
          isDefault: item.isDefault,
        };
        this.list.unshift(this.address);
        if (item.isDefault) {
          this.chosenAddressId = this.resdata[index].addressid;
        }
      });
    });
  },
  methods: {
    onAdd() {
      //添加地址
      this.$router.push("/addmassage");
    },
    onSelect(item, index) {
      console.log(item, index);
      this.chosenAddressId = this.resdata[index].addressid;
      // console.log(this.chosenAddressId);
    },
    onEdit(item, index) {
      //修改地址
      console.log(item, index);
      this.$router.push("/setmassage/" + item.id);
    },
  },
};
</script>

<style>
</style>